<template>
	<view class="modal-box" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="content-box">
				<mBack ref="mBack" :name="backName" @getGameResult="close" v-if="
            type != 'hook' &&
            type != 'develop' &&
			 type != 'staff' &&
			  type != 'secretary' &&
		type!='company'&&
            !showLiveConfirm &&
            !isDevContentOpen
          ">
				</mBack>

				<view class="develop-box mode-modal flex-column-start-center" v-if="type == 'develop'" @click="close">
					<view class="modal-content-box  develop-modal-content  flex-column-start-center" @click.stop>

						<view class="modal-title modal-transparent-title">
							<image class="image-title" :src="staffSecretaryTitleImg" mode="aspectFill"></image>
							<view class="close-icon">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cfc771011e642908073bd33850b419d.png"
									mode="aspectFill" @click="close"></image>
							</view>
						</view>
						<view class="modal-content flex-column-start-center">
							<view class="dev-info-box flex-column-start-center">
								<view class="avatar-attr flex-row-start-start">
									<view class="avatar-box flex-column-start-center">
										<image class="avatar-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg"
											mode="aspectFill"></image>

									</view>
									<view class="dev-attr-box flex-row-between-start">
										<view class="attr-row-item flex-row-between-center"
											v-for="(item, index) in userInfo.attrList" :key="index">
											<view class="row-item-label flex-row-start-center">
												<view class="point-icon"></view>

												{{ item.label }}
											</view>
											<view class="row-item-value">{{ item.value }}</view>
										</view>
									</view>
								</view>
								<view class="level-progress flex-row-start-center">
									<view class="progress-content flex-column-center-center">
										<view class="progress-text flex-row-between-center">
											<view class="progress-level-name">
												<view class="leve-name-icon"></view>
												新星总裁 · 10阶
											</view>
											<view class="progress-level-power-num flex-row-start-center">
												<view class="progress-now-Exp">{{
                          userInfo.nowExp
                        }}</view>/
												<view class="progress-next-NeedExp">{{
                          userInfo.needExp
                        }}</view>
											</view>
										</view>
										<view class="progress-react">
											<view class="inner-content" :style="{ width: userUpdatePress }"></view>
										</view>
									</view>
									<view class="dev-update-btn flex-row-start-center">
										<view class="dev-update-btn-content">
											<view class="btn-inner-content flex-row-center-center">
												<view class="red-point" v-if="userInfo.nowExp >= userInfo.needExp">
												</view>
												突 破
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="dev-skill-box flex-column-start-center">
								<scroll-view ref="scrollView" scroll-y class="dev-skill-scroll"
									:scroll-with-animation="true">
									<view class="dev-skill-list flex-row-start-start">
										<view class="dev-skill-item" @click="handleSkillClick(item, index)"
											v-for="(item, index) in userInfo.skillList" :key="index">
											<view class="dev-skill-item-img">
												<image class="cover-img" :src="item.image" mode="aspectFill">
												</image>
												<view class="locked-masker flex-row-center-center" v-if="item.locked">
													<image class="locked-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
														mode="aspectFill"></image>
												</view>
											</view>
											<view class="dev-skill-text">{{ item.name }}</view>

											<view v-if="!item.locked" class="dev-skill-level flex-row-center-center">
												{{ item.level }}
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view class="dev-bottom-box"></view>
						</view>
					</view>
					<view class="bottom-tip">
						<view class="left-point"></view>
						<view class="center-content">点击任意空白区域关闭</view>
						<view class="right-point"></view>
					</view>
				</view>

				<view class="hook-box hook-company-box" v-if="type == 'hook'" @click="close">
					<view class="center-content" @click.stop>
						<view class="content-box">
							<view class="top-title">
								公司收益
								<view class="bottom-line">
									<view class="line-content"></view>
								</view>
								<view class="close-icon" @click="close">
									<image class="close-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
										mode="aspectFill"></image>
								</view>
							</view>

							<view class="get-attr-box">
								<view class="attr-box-content">
									<view class="attr-item">
										<view class="attr-icon">
											<image class="attr-icon-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7cdbe1873c14481f977dc53066f307b8.png"
												mode="aspectFill"></image>
										</view>
										<view class="attr-text">赚钱速度</view>
										<view class="attr-content">+300/分</view>
									</view>
									<view class="attr-item">
										<view class="attr-icon">
											<image class="attr-icon-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c020a7f918e9411daac5dd97704ec7b6.png"
												mode="aspectFill"></image>
										</view>
										<view class="attr-text">经验速度</view>
										<view class="attr-content">+250/分</view>
									</view>
									<view class="attr-item"> </view>
								</view>
							</view>
							<view class="hook-time">
								<view class="hook-time-content">
									<view class="hook-time-icon"></view>
									<view class="hook-time-title">挂机时间</view>
									<view class="hook-time-inner">
										<image class="tiem-inner-icon"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a37403ffed884355bfbe673945db67a9.png"
											mode="aspectFill"></image>
										00:00:32
									</view>
								</view>
							</view>
							<view class="hook-reward">
								<view class="hook-reward-content">
									<view class="hook-reward-icon"></view>
									<view class="hook-reward-title">挂机收益</view>
								</view>
							</view>

							<view class="reward-list">
								<view class="reward-item" v-for="(item, index) in rewardList" :key="index">
									<image class="reward-icon" :src="item.icon" mode="aspectFill"></image>
									<view class="reward-num">{{ item.num }}</view>
								</view>
							</view>

							<view class="btn-box flex-center-center">
								<view class="btn-item">
									<view class="btn-content hook-btn">快速挂机</view>
								</view>
								<view class="btn-item">
									<view class="btn-content get-reward-btn">领取收益</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bottom-tip">
						<view class="left-point"></view>
						<view class="m-center-content">点击任意空白区域关闭</view>
						<view class="right-point"></view>
					</view>

				</view>

				<view class="company-box hook-company-box" v-if="type == 'company'" @click="close">
					<view class="center-content" @click.stop>
						<view class="content-box">
							<view class="top-title">
								<text class="companyName">{{ companyData.companyName }}</text>
								<image class="changeCompanyName-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/98a957aab52e4047b5bd49a31c42598a.png"
									mode="aspectFill"></image>
								<view class="bottom-line">
									<view class="line-content"></view>
								</view>
								<view class="close-icon" @click="close">
									<image class="close-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
										mode="aspectFill"></image>
								</view>
							</view>
							<view class="title-box">
								<view class="title-content">
									<view class="left-tip">
										<view class="tip-icon"></view>
										<view class="tip-text">公司升级条件</view>
									</view>
									<view class="right-content"></view>
								</view>
							</view>
							<view class="compnay-update-condition">
								{{ companyData.updateCondition }}
								(<text
									class="nowExp">{{ companyData.nowExp }}</text>/<text>{{ companyData.totalExp }}</text>)
							</view>

							<view class="title-box">
								<view class="title-content">
									<view class="left-tip">
										<view class="tip-icon"></view>
										<view class="tip-text">下一等级获得</view>
									</view>
									<view class="right-content"></view>
								</view>
							</view>
							<view class="company-update-reward">
								<view class="u-reward-item" v-for="(item, index) in companyUpdateRewardList"
									:key="index">
									<image class="u-reward-item-img" :src="item.image" mode="aspectFill"></image>
									<view class="reward-tip-info">{{ item.tip }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bottom-tip">
						<view class="left-point"></view>
						<view class="m-center-content">点击任意空白区域关闭</view>
						<view class="right-point"></view>
					</view>

				</view>

				<!-- @click="close" -->
				<!-- v-if="type == 'live'" -->
				<view class="live-box" v-if="false">
					<view class="center-content" @click.stop>
						<view class="live-content-box">
							<view class="top-box"></view>
							<scroll-view ref="scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="live-room-list">
									<view class="room-item" v-for="(item, index) in liveRoomList"
										@click="handleRoomItemClick(item, index)" :key="index">
										<image class="room-item-coverImg" :src="item.coverImage" mode="aspectFill">
										</image>

										<view class="name-consume-box">
											<view class="room-name">

												<view class="romm-name-text">{{ item.name }}</view>

												<view class="consume-box">
													<image class="consume-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c9864f9a483748a78c3aad0a7fd21f15.png"
														mode="aspectFill"></image>
													<view class="consume-num">x{{ item.consume }}</view>
												</view>
											</view>

											<view class="room-level">
												<text class="level-icon">Lv.</text>
												<text class="level-num">{{ item.level }}</text>
											</view>
										</view>

										<view class="living-icon" v-if="item.living && !item.locked">
											直播中
										</view>
										<view class="room-locked-masker" v-if="item.locked && !item.living">
											<image class="room-locked-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- @click.stop="handleCloseLiveModal" -->
					<view class="confirm-live-modal" v-if="showLiveConfirm" @click.stop>
						<view class="live-modal-img">
							<image class="cover-img" :src="activeLive.coverImage" mode="aspectFill"></image>
						</view>
						<view class="live-modal-right-btns flex-column-start-center">
							<view class="live-modal-btn-item flex-row-center-center" :class="{
                  'liveing-btn-item': activeLive.living && item.type == 'live',
                }" v-for="(item, index) in liveRightBtns" :key="index"
								@click="handleLiveModalBtnItemClick(item, index)">
								<image v-if="
                    (item.image && !activeLive.liveGirl) || item.type == 'staff'
                  " class="cover-img" :class="{
                    'live-add-icon': item.type == 'live',
                    'staff-add-icon': item.type == 'staff',
                  }" :src="item.image" mode="aspectFill">
								</image>
								<view class="live-girl flex-row-center-center" v-if="
                    activeLive.liveGirl &&
                    activeLive.liveGirl.image &&
                    item.type == 'live'
                  ">
									<image class="live-girl-img" :src="activeLive.liveGirl.image" mode="aspectFill">
									</image>
								</view>
								<view class="btn-text" v-if="item.type == 'staff'">{{
                  item.name
                }}</view>
								<view class="btn-text" v-if="item.type == 'live'">
									<text v-if="!activeLive.living">{{ item.name }}</text>
									<text v-else>直播中</text>
								</view>
							</view>
						</view>
						<developPop ref="developPop" :startShow="true" :maskCloseAble="false"></developPop>
						<mBack ref="liveModalMback" @getGameResult="handleCloseLiveModal"></mBack>

						<view class="live-second-modal" v-if="showLiveSecondModal" @click.stop="handleSecondModalClick">
							<mBack ref="liveSecondModalMback" @getGameResult="handleCloseLiveSecondModal"
								v-if="actSecondModalType != 'staffSlot'"></mBack>
							<view class="modal-content-box live-sencond-modal-content" @click.stop :class="{
                  'seconde-modal-staff-content':
                    actSecondModalType == 'staffSlot',
                }">
								<view class="modal-content flex-column-start-center">
									<view class="modal-title">
										<text v-if="actSecondModalType == 'liveRoom'">直播间</text>
										<text v-else-if="actSecondModalType == 'staffSlot'">员工</text>
										<view class="bottom-line">
											<view class="line-content"></view>
										</view>
										<view class="close-icon" @click="handleCloseLiveSecondModal">
											<image class="close-icon-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="live-room-second-modal-content"
										v-if="actSecondModalType == 'liveRoom'">
										<view class="live-room-content flex-row-start-center">
											<view class="left-room-attr">
												<view class="title-box title-bg">
													<view class="title-content">
														<view class="left-tip">
															<view class="tip-icon"></view>
															<view class="tip-text">直播收益</view>
														</view>
														<view class="right-content">
															<view class="live-room-icon">
																<image class="cover-img"
																	src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a20b1b4318784286bd7bc5a1eb2ec23e.png"
																	mode="aspectFill"></image>
															</view>
															<view class="live-room-value">+200/分</view>
														</view>
													</view>
												</view>
												<view class="title-box title-bg">
													<view class="title-content">
														<view class="left-tip">
															<view class="tip-icon"></view>
															<view class="tip-text">直播经验</view>
														</view>
														<view class="right-content">
															<view class="live-room-icon">
																<image class="cover-img"
																	src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1f61d153a0444f659349ce5513da6b4b.png"
																	mode="aspectFill"></image>
															</view>
															<view class="live-room-value">+200/分</view>
														</view>
													</view>
												</view>
												<view class="title-box title-bg">
													<view class="title-content">
														<view class="left-tip">
															<view class="tip-icon"></view>
															<view class="tip-text">舞姬人气</view>
														</view>
														<view class="right-content">
															<view class="live-room-icon">
																<image class="cover-img"
																	src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e568c5338c39440fb5bb5a3628f27ead.png"
																	mode="aspectFill"></image>
															</view>
															<view class="live-room-value">+200/分</view>
														</view>
													</view>
												</view>
											</view>
											<view class="right-girl-slot" @click="handleLiveItemSlotClick">
												<view class="add-icon" v-if="!activeGirl.image">+</view>
												<image class="slot-image" v-else :src="activeGirl.image"
													mode="aspectFill">
												</image>
												<view class="slot-tip" v-if="!activeGirl.image">放置空闲舞姬</view>
												<view class="person-bottom-info" v-if="activeGirl.image">
													<view class="person-name">{{ activeGirl.name }}</view>
													<view class="person-popularity">
														<view class="popularity-icon">
															<image class="popularity-icon-img"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/206005a86c6d41c0a7dc9cb8d18fb0ac.png"
																mode="aspectFill"></image>
														</view>
														<view class="person-popularity-num">
															{{ activeGirl.popularity | popularityFilter }}
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="title-box title-bg">
											<view class="title-content">
												<view class="left-tip">
													<view class="tip-icon"></view>
													<view class="tip-text">直播时间</view>
												</view>
												<view class="right-content">
													<view class="live-room-icon">
														<image class="cover-img"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/07d4566180494460aa11048e5a026c62.png"
															mode="aspectFill"></image>
													</view>
													<view class="live-room-value live-room-live-time">02:00:00
													</view>
												</view>
											</view>
										</view>
										<view class="title-box">
											<view class="title-content">
												<view class="left-tip">
													<view class="tip-icon"></view>
													<view class="tip-text">直播奖励</view>
												</view>
												<view class="right-content"></view>
											</view>
										</view>

										<view class="n-reward-list">
											<scroll-view :scroll-x="true" style="white-space: nowrap"
												class="scroll-content">
												<view class="reward-item" v-for="(item, index) in rewardList"
													:key="index">
													<image class="reward-item-icon" :src="item.icon" mode="aspectFill">
													</image>
													<view class="reward-num">{{ item.num }}</view>
												</view>
											</scroll-view>
										</view>

										<view class="consume-box live-consume">
											<image class="consume-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c9864f9a483748a78c3aad0a7fd21f15.png"
												mode="aspectFill"></image>
											<view class="consume-number">
												<text class="num">{{ nowPower }}</text>
												/
												<text class="need-num">{{ liveNeedPower }}</text>
											</view>
										</view>

										<view class="btn-box flex-center-center">
											<view class="btn-item">
												<view class="btn-content start-live-btn" @click="handleStartLive">
													<text v-if="activeLive.living">进入直播间</text>
													<text v-else>开始直播</text>
												</view>
											</view>
										</view>
									</view>

									<view class="staff-slot-second-modal-content"
										v-if="actSecondModalType == 'staffSlot'">
										<view class="staff-slot-list">
											<!-- 代码处理  -->
											<scroll-view :scroll-y="true" class="scroll-content">
												<view class="staff-slot-item flex-row-start-center"
													v-for="(item, index) in staffSlotList" :key="index">
													<view class="staff-slot-content flex-column-center-center"
														@click="handleStaffSlotClick(item, index)">
														<text class="staff-slot-add-icon" v-if="!item.fillData">+</text>
														<view class="staff-slot-tip" v-if="!item.fillData">
															添加空闲{{
                                item.type | staffTypeFilter(staffTypes)
                              }}</view>
														<!--  -->
														<view class="fillData" v-if="item.fillData">
															<image :src="item.fillData.image" class="fillData-img"
																mode="aspectFill"></image>
															<view class="staff-slot-bottom-info">
																<view
																	class="staff-slot-name staff-slot-name-fill-center">
																	{{ item.fillData.name }}({{
                                    item.type | staffTypeFilter(staffTypes)
                                  }})
																</view>
															</view>
														</view>

														<view class="close-staff flex-row-center-center"
															v-if="item.fillData" @click.stop="
                                handleClearStaffSlotItem(item, index)
                              ">X</view>
													</view>
													<view class="staff-slot-info flex-column-center-center">
														<view class="info-row flex-row-start-center">
															<view class="info-row-label">岗位：</view>
															<view class="info-row-value">
																{{ item.type | staffTypeFilter(staffTypes) }}
															</view>
														</view>
														<view class="info-row flex-row-start-center">
															<view class="info-row-label">人才：</view>
															<view class="info-row-value">妙陈</view>
														</view>
														<view class="info-row flex-row-start-center">
															<view class="info-row-label">效果：</view>
															<view class="info-row-value">运营收入加成20%</view>
														</view>
													</view>
												</view>
											</scroll-view>
										</view>
									</view>
								</view>
							</view>
							<view class="bottom-tip" v-if="actSecondModalType == 'staffSlot'">
								<view class="left-point"></view>
								<view class="m-center-content">点击任意空白区域关闭</view>
								<view class="right-point"></view>
							</view>
						</view>
						<!--  -->
						<view class="live-third-modal" v-if="showLiveThirdModal">
							<mBack ref="liveThirdModalMback" @getGameResult="handleCloseLiveThirdModal"></mBack>
							<view class="modal-content-box live-third-modal-content">
								<view class="modal-content flex-column-start-center">
									<view class="modal-title">
										<text v-if="actThirdModalType == 'chooseGirl'">选择舞姬</text>
										<text v-if="actThirdModalType == 'chooseStaff'">选择员工</text>

										<view class="bottom-line">
											<view class="line-content"></view>
										</view>
										<view class="close-icon" @click="handleCloseLiveThirdModal">
											<image class="close-icon-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
												mode="aspectFill"></image>
										</view>
									</view>

									<!--  v-if="!activeLive.living"-->
									<view class="person-choose-list" v-if="actThirdModalType == 'chooseGirl'">
										<scroll-view :scroll-y="true" class="scroll-content">
											<view class="person-item" @click="handlelGirlItemClick(item, index)" :class="{
                          'active-person-item': activeGirlIndex == index,
                        }" v-for="(item, index) in girlList" :key="index">
												<image class="person-item-icon" :src="item.image" mode="aspectFill">
												</image>
												<view class="person-type-icon living" v-if="item.living">直播中</view>
												<view class="person-type-icon free" v-if="!item.living">空闲</view>
												<view class="choosed-icon"
													v-if="!item.living && index == activeGirlIndex">
													<image class="choosed-icon-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6461cc205bf4e968bbb6f50728daf23.png"
														mode="aspectFill"></image>
												</view>
												<view class="choose-masker-box"
													v-if="!item.living && index == activeGirlIndex"></view>
												<view class="person-bottom-info">
													<view class="person-name">{{ item.name }}</view>
													<view class="person-popularity">
														<view class="popularity-icon">
															<image class="popularity-icon-img"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/206005a86c6d41c0a7dc9cb8d18fb0ac.png"
																mode="aspectFill"></image>
														</view>
														<view class="person-popularity-num">
															{{ item.popularity | popularityFilter }}
														</view>
													</view>
												</view>
												<view class="info-bottom"></view>
											</view>
										</scroll-view>
									</view>
									<view class="person-choose-list" v-if="actThirdModalType == 'chooseStaff'">
										<scroll-view :scroll-y="true" class="scroll-content">
											<view class="person-item" @click="handlelStaffItemClick(item, index)"
												:class="{
                          'active-person-item': activeStaffIndex == index,
                        }" v-for="(item, index) in staffList" :key="index">
												<image class="person-item-icon" :src="item.image" mode="aspectFill">
												</image>
												<view class="person-bottom-info">
													<view class="person-name person-name-fill-center">
														{{ item.name }}({{
                              item.type | staffTypeFilter(staffTypes)
                            }})
													</view>
												</view>
												<view class="person-type-icon"
													:class="{ free: !item.used, used: item.used }">
													<text v-if="item.used">工作中</text>
													<text v-else>空闲</text>
												</view>
												<view class="disabled-masker" v-if="
                            (item.type != activeStaffSlotType &&
                              !firstInStaffManage) ||
                            item.used
                          ">
													<image class="disabled-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/50e752e9ddae470393b1c33f7e99f75f.png"
														mode="aspectFill"></image>
												</view>
												<view class="choose-masker-box"
													v-if="!item.used && index == activeStaffIndex"></view>
												<view class="choosed-icon"
													v-if="!item.used && index == activeStaffIndex">
													<image class="choosed-icon-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6461cc205bf4e968bbb6f50728daf23.png"
														mode="aspectFill"></image>
												</view>

												<view class="info-bottom"></view>
											</view>
										</scroll-view>
									</view>

									<view class="third-confirm-box flex-row-center-center">
										<view class="btn-box flex-center-center">
											<view class="btn-item">
												<view class="btn-content start-live-btn"
													@click="handleThirdLiveModalConfirm()">
													确 定
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="mode-modal staff-secretary-box" v-if="type == 'staff' || type == 'secretary'"
					@click="close">
					<view class="modal-content-box mode-modal-content flex-column-start-center" @click.stop>
						<view class="modal-title modal-transparent-title">
							<image class="image-title" :src="staffSecretaryTitleImg" mode="aspectFill"></image>
							<view class="close-icon">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cfc771011e642908073bd33850b419d.png"
									mode="aspectFill" @click="close"></image>
							</view>
						</view>
						<view class="modal-content flex-column-start-center">
							<view class="secretary-box" v-if="type == 'staff' || type == 'secretary'||type=='live'">
								<scroll-view ref="scrollView" scroll-y class="scroll-content"
									:scroll-with-animation="true">
									<view class="secretary-list flex-row-start-start">
										<view class="secretary-item  flex-column-start-center"
											v-for="(item,index) in staffList" :key="index"
											:class="{'coins-no-enough':item.updateNeedCoin>userInfo.coins&&item.isMine}">
											<view class="secretary-item-info ">
												<image class="cover-img secretary-item-info-img" :src="item.image"
													mode="aspectFill"></image>
												<view class="secretary-name flex-column-center-center">
													<text class="staff-type"
														v-if="type=='staff'">{{item.type|staffTypeFilter(staffTypes)}}</text>
													<view class="split-icon" v-if="type=='staff'&&item.type">·</view>
													<text class="secretary-name-text">{{item.name}}</text>
												</view>

												<view class="secretary-level flex-row-start-center">
													<text class="level-text">Lv.</text>
													{{item.level}}
												</view>

												<view class="secretary-attr-info flex-row-between-end">
													<view class="attr-item flex-row-start-center">
														赚钱：3000/s
													</view>

													<view class="attr-item flex-row-end-center">
														人气：+10%
													</view>

												</view>


											</view>
											<view class="secretary-item-update-btn flex-row-center-center"
												:class="{'secretary-update-scale':index==actClickItemIndex}"
												@touchstart="handleSSUpdateTouchStart(item,index)"
												@touchend="handleSSUpdateTouchEnd(item,index)"
												@touchcancel="handleSSUpdateTouchEnd(item,index)">
												<view class="secretary-update-consume flex-row-center-center">
													<image class="secretary-consume-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb5d7cac997f4eb5950dfadbf76813a0.png"
														mode="aspectFill"></image>
													{{item.updateNeedCoin}}
												</view>
												<text class="update-text">升 级</text>
											</view>

											<view class="card-not-get-makser flex-row-center-center"
												v-if="!item.isMine">
												<view class="not-get-tip">未获得</view>

											</view>

										</view>
									</view>

								</scroll-view>

							</view>
						</view>
					</view>
					<view class="bottom-tip">
						<view class="left-point"></view>
						<view class="center-content">点击任意空白区域关闭</view>
						<view class="right-point"></view>
					</view>
				</view>


			</view>
		</u-modal>
		<skillPop ref="skillPop" v-if="type == 'develop'"></skillPop>
	</view>
</template>

<script>
	import {
		leveList
	} from "./mockData.js";

	import skillPop from "./skill-pop.vue";
	import mBack from "@/components/m-back/index.vue";
	import girlDevelopModal from "@/components/m-daily/girl-develop-modal.vue";
	import developPop from "components/m-girl-develop/develop-pop";

	export default {
		props: {},
		components: {
			skillPop,
			mBack,
			girlDevelopModal,
			developPop,
		},
		filters: {
			popularityFilter(value) {
				if (value >= 10000) {
					return Number(value / 10000).toFixed(1) + "万";
				} else {
					return value;
				}
			},
			staffTypeFilter(value, staffTypes) {
				let staffArr = staffTypes.filter((item, index) => {
					return item.value == value;
				});
				return staffArr[0].label;
			},
		},
		watch: {
			activeLive: {
				handler(newVal, oldVal) {
					if (newVal.living) {
						this.liveTabList[0].name = "直播中";
					} else {
						this.liveTabList[0].name = "直播";
					}
				},
				deep: true,
				immediate: true,
			},
		},

		data() {
			return {
				show: false,
				type: "develop",
				actLiveType: "live",
				actThirdModalType: "chooseGirl", //chooseGirl  chooseStaff
				actSecondModalType: "staffSlot", //liveRoom  staffSlot
				developType: null,
				showLiveConfirm: false,
				showLiveSecondModal: false,
				showLiveThirdModal: false,
				isDevContentOpen: false,
				actClickItemIndex: -1,
				btnClickTimeOutId: null,
				userInfo: {
					avatar: "",
					prestige: 22850,
					attrList: [{
							label: "学识",
							value: 328,
						},
						{
							label: "情商",
							value: 58,
						},
						{
							label: "沟通",
							value: 1101,
						},
						{
							label: "影响",
							value: 997,
						},
						{
							label: "决策",
							value: 69,
						},
					],
					nowExp: 7550,
					needExp: 8400,
					coins: 1500,
					skillList: [{
							name: "八卦",
							total: 10,
							now: 7,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "画饼",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "速战速决",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: true,
							level: 10,
						},
						{
							name: "八卦",
							total: 10,
							now: 7,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "画饼",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "速战速决",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: true,
							level: 10,
						},
						{
							name: "八卦",
							total: 10,
							now: 7,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "画饼",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: false,
							level: 10,
						},
						{
							name: "速战速决",
							total: 10,
							now: 0,
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44de08e26aa048218e1ce11cf5c28d98.jpg",
							needSecond: 30, //单位 秒钟
							locked: true,
							level: 10,
						},
					],
				},
				companyUpdateRewardList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						tip: "获得运营员工爽歪歪",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						tip: "获得灯光师光光",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						tip: "获得化妆师婷婷",
					},
				],
				liveRightBtns: [{
						name: "直播",
						type: "live",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png",
					},
					{
						name: "员工",
						type: "staff",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1f8d0d353637472eb84f3a8063834431.png",
					},
				],
				backName: "",
				companyData: {
					companyName: "杭州境由心动",
					updateCondition: "公司经验达到4280",
					totalExp: 4280,
					nowExp: 2511,
					level: 13,
				},
				activeStaff: {
					id: 0,
					name: "秘书",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
					type: "operator",
					start: 3,
					RarityLevel: 4,
					level: 0,
					used: false,
					age: 18,
					constellation: "狮子座",
					ability: "装备添加后，运营产出奖励提升2%",
					featureAbility: "装备添加后，运营产出奖励提升4%",
				},
				showStaffUpdate: false,
				showRecruitModal: false,
				activeStaffIndex: -1,
				activeGirlIndex: -1,
				activeGirl: {},
				tempActiveGirl: {},
				tempActiveStaff: {},
				nowPower: 12,
				liveNeedPower: 1,
				firstInStaffManage: true,
				activeStaffSlotType: "",
				actLiveTabIndex: 0,
				getRecruitCard: {
					id: 0,
					name: "秘书",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
					type: "operator",
					start: 3,
					RarityLevel: 4,
					level: 0,
					used: false,
					age: 18,
					constellation: "狮子座",
				},
				staffTypes: [{
						label: "运营",
						value: "operator",
					},
					{
						label: "化妆师",
						value: "dresser",
					},
					{
						label: "摄影师",
						value: "photographer",
					},
					{
						label: "灯光师",
						value: "lighter",
					},
				],
				staffList: [{
						id: 0,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "operator",
						start: 3,
						RarityLevel: 4,
						level: 30,
						used: false,
						age: 18,
						constellation: "狮子座",
						ability: "装备添加后，运营产出奖励提升2%",
						featureAbility: "装备添加后，运营产出奖励提升4%",
						updateNeedCoin: 1200,
						isMine: true
					},
					{
						id: 1,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "operator",
						start: 5,
						RarityLevel: 4,
						level: 31,
						used: false,
						age: 20,
						constellation: "处女座",
						ability: "装备添加后，运营产出奖励提升2%",
						featureAbility: "装备添加后，运营产出奖励提升4%",
						updateNeedCoin: 1300,
						isMine: true
					},
					{
						id: 2,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "dresser",
						start: 4,
						RarityLevel: 4,
						level: 28,
						used: false,
						age: 22,
						constellation: "天秤座",
						ability: "装备添加后，装扮产出奖励提升2%",
						featureAbility: "装备添加后，装扮产出奖励提升4%",
						updateNeedCoin: 2200,
						isMine: true
					},
					{
						id: 3,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						type: "photographer",
						start: 3,
						RarityLevel: 3,
						level: 30,
						used: false,
						age: 21,
						constellation: "巨蟹座",
						ability: "装备添加后，摄影产出奖励提升2%",
						featureAbility: "装备添加后，摄影产出奖励提升4%",
						updateNeedCoin: 2500,
						isMine: true
					},
					{
						id: 4,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						type: "lighter",
						start: 3,
						RarityLevel: 3,
						level: 33,
						used: false,
						age: 23,
						constellation: "双子座",
						ability: "装备添加后，灯光产出奖励提升2%",
						featureAbility: "装备添加后，灯光产出奖励提升4%",
						updateNeedCoin: 1200,
						isMine: false
					},
					{
						id: 5,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						type: "dresser",
						start: 5,
						RarityLevel: 3,
						level: 35,
						used: false,
						age: 19,
						constellation: "天马座",
						ability: "装备添加后，装扮产出奖励提升2%",
						featureAbility: "装备添加后，装扮产出奖励提升4%",
						updateNeedCoin: 2200,
						isMine: false
					},
					{
						id: 6,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						type: "dresser",
						start: 4,
						RarityLevel: 2,
						level: 32,
						used: false,
						age: 23,
						constellation: "摩羯座",
						ability: "装备添加后，装扮产出奖励提升2%",
						featureAbility: "装备添加后，装扮产出奖励提升4%",
						updateNeedCoin: 2200,
						isMine: false
					},
					{
						id: 7,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
						type: "lighter",
						start: 3,
						RarityLevel: 2,
						level: 28,
						used: false,
						age: 26,
						constellation: "水瓶座",
						ability: "装备添加后，灯光产出奖励提升2%",
						featureAbility: "装备添加后，灯光产出奖励提升4%",
						updateNeedCoin: 1800,
						isMine: false
					},
				],
				staffSlotList: [{
						type: "operator",
						fillData: null,
					},
					{
						type: "dresser",
						fillData: null,
					},
					{
						type: "photographer",
						fillData: null,
					},
					{
						type: "lighter",
						fillData: null,
					},
				],
				updateRewardList: [{
						name: "金币",
						num: 1000,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
					},
					{
						name: "经验币",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
					},
					{
						name: "物品3",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
					},
					{
						name: "物品四",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
					},
				],
				updateNeedList: [{
						name: "金币",
						num: 1000,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
					},
					{
						name: "经验币",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
					},
				],
				attrList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/206005a86c6d41c0a7dc9cb8d18fb0ac.png",
						num: 3386,
						featureNum: 3389,
						name: "直播人气",
						attr: "dance",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/206005a86c6d41c0a7dc9cb8d18fb0ac.png",
						num: 84,
						featureNum: 85,
						name: "赚钱速度",
						attr: "popular",
					},
				],
				liveTabList: [{
						name: "直播",
						type: "live",
					},
					{
						name: "升级",
						type: "update",
					},
					{
						name: "管理",
						type: "manage",
					},
				],
				activeLive: {
					name: "暂无数据",
					coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4e09029aa324a4db6a3ce1cf26be4b5.png",
					consume: 1,
					level: 10,
					living: false,
					locked: false,
					storyId: "",
					popularity: 0,
				},
				liveRoomList: [{
						name: "直播间1",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/410b6edc6379486aa207add90bf95bc3.png",
						consume: 1,
						level: 10,
						living: false,
						locked: false,
						storyId: "S035NCS",
						popularity: 2500,
						liveGirl: null,
					},
					{
						name: "直播间2",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c537b83bc7414b5a9184fc15b5be479a.png",
						consume: 1,
						level: 20,
						living: false,
						locked: false,
						storyId: "S035NCS",
						popularity: 3000,
						liveGirl: null,
					},
					{
						name: "直播间3",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4e09029aa324a4db6a3ce1cf26be4b5.png",
						consume: 1,
						level: 30,
						living: false,
						locked: false,
						storyId: "S035NCS",
						popularity: 15000,
						liveGirl: null,
					},
					{
						name: "直播间4",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4d835d1f772f485a809eb19583a1c6c9.png",
						consume: 1,
						level: 40,
						living: false,
						locked: false,
						storyId: "S035NCS",
						popularity: 3500,
						liveGirl: null,
					},
					{
						name: "直播间5",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a1290e45cbeb486dab1d5c338579e83d.png",
						consume: 1,
						level: 50,
						living: false,
						locked: true,
						storyId: "S035NCS",
						popularity: 4000,
						liveGirl: null,
					},
					{
						name: "直播间6",
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2afc8331a39d444fac24768446064fc6.png",
						consume: 1,
						level: 50,
						living: false,
						locked: true,
						storyId: "S035NCS",
						popularity: 5000,
						liveGirl: null,
					},
				],
				levelList: [],
				girlList: [{
						id: 0,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "person",
						start: 3,
						RarityLevel: 4,
						level: 30,
						living: false,
						popularity: 2000,
					},
					{
						id: 1,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "person",
						start: 5,
						RarityLevel: 4,
						level: 31,
						living: false,
						popularity: 3000,
					},
					{
						id: 2,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "person",
						start: 4,
						RarityLevel: 4,
						level: 28,
						living: false,
						popularity: 4000,
					},
					{
						id: 3,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 30,
						living: false,
						popularity: 5000,
					},
					{
						id: 4,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 33,
						living: false,
						popularity: 12000,
					},
					{
						id: 5,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						type: "person",
						start: 5,
						RarityLevel: 3,
						level: 35,
						living: false,
						popularity: 20000,
					},
					{
						id: 6,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						type: "person",
						start: 4,
						RarityLevel: 2,
						level: 32,
						living: false,
						popularity: 4000,
					},
					{
						id: 7,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
						type: "person",
						start: 3,
						RarityLevel: 2,
						level: 28,
						living: false,
						popularity: 5000,
					},
				],

				rewardList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						isEmpty: false,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						isEmpty: false,
					},
					{
						name: "改名卡",
						type: "prop",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e9dc4476a7c84128a8a82769b6bf6de2.png",
						isEmpty: false,
					},
					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						isEmpty: false,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						isEmpty: false,
					},
				],
			};
		},

		computed: {
			staffSecretaryTitleImg() {
				let type = this.type
				switch (type) {
					case 'secretary':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7eccc10126d34a469b67609d5154b3d6.png"
						break;
					case 'staff':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f1e8e22b42cc4bf5953f7601df018cdc.png"
						break;
					case 'develop':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cd524c6d4c6b47a385983d9668d5281b.png"
						break;
					case 'live':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8518653a14984d288731d1e1464cc115.png"
						break;
					default:
						break;
				}
			},
			userUpdatePress() {
				let {
					nowExp,
					needExp
				} = this.userInfo;

				if (nowExp > needExp) {
					return "100%";
				} else {
					return (nowExp / needExp).toFixed(2) * 100 + "%";
				}
			},
		},

		created() {
			this.levelList = leveList;
		},
		mounted() {},

		methods: {
			handleSSUpdateTouchStart(item, index) {
				this.actClickItemIndex = index

			},
			handleSSUpdateTouchEnd(item, index) {
				if (this.btnClickTimeOutId) {
					clearTimeout(this.btnClickTimeOutId)
				}
				this.btnClickTimeOutId = setTimeout(() => {
					this.actClickItemIndex = -1
				}, 100)
			},
			handleSecondModalClick() {
				if (this.actSecondModalType == "staffSlot") {
					this.handleCloseLiveSecondModal();
				}
			},
			handleThirdLiveModalConfirm() {
				if (this.actThirdModalType == "chooseGirl" && this.tempActiveGirl.name) {
					this.activeGirl = this.tempActiveGirl;
				} else if (this.actThirdModalType == "chooseStaff") {
					// 点了确定
					this.tempActiveStaff.used = true;
					this.pushStaffToSlot(this.tempActiveStaff, this.activeStaffIndex);
				}

				this.handleCloseLiveThirdModal();
			},
			handleLiveModalBtnItemClick(item, index) {
				if (item.type == "live") {
					// this.showLiveSecondModal = true
					if (!this.activeLive.living) {
						this.openSecondModal("liveRoom");
					} else {
						this.$emit("result", this.activeLive.storyId);
					}
				} else if (item.type == "staff") {
					this.openSecondModal("staffSlot");
				}
			},
			openSecondModal(type) {
				this.actSecondModalType = type;
				this.showLiveSecondModal = true;
			},
			openThridModal(type) {
				this.actThirdModalType = type;
				this.showLiveThirdModal = true;
			},
			handleCloseStaffUpdateModal() {
				this.showStaffUpdate = false;
			},
			handleClearStaffSlotItem(item, index) {
				this.staffList[item.fillData.index].used = false;
				this.staffSlotList[index].fillData = null;
			},
			handleStaffSlotClick(item, index) {
				if (this.firstInStaffManage) {
					this.firstInStaffManage = false;
				}
				this.activeStaffSlotType = item.type;
				this.openThridModal("chooseStaff");
			},
			updateStaffState(data) {
				this.staffList[data.index].used = false;
			},
			pushStaffToSlot(data) {
				this.staffSlotList.forEach((item, index) => {
					if (item.type == data.type) {
						if (item.fillData) {
							this.updateStaffState(item.fillData);
						}
						item.fillData = {
							...data,
						};
					}
				});
			},
			handlelStaffItemClick(item, index) {
				if (this.firstInStaffManage) {
					this.firstInStaffManage = false;
					this.activeStaffSlotType = item.type;
				}
				if (!item.used && item.type == this.activeStaffSlotType) {
					item.index = index;
					this.tempActiveStaff = item;
					this.activeStaffIndex = index;
				}
			},
			handleLiveItemSlotClick() {
				if (this.activeLive.living) {
					return;
				}
				this.openThridModal("chooseGirl");

				// if (this.activeGirlIndex == -1) {
				// 	let notLivingGirlList = this.girlList.map((item, index) => {
				// 		return {
				// 			...item,
				// 			index: index
				// 		}

				// 	}).filter((item, index) => {
				// 		return !item.living

				// 	})
				// 	if (notLivingGirlList.length) {
				// 		this.activeGirl = notLivingGirlList[0]
				// 		this.activeGirlIndex = notLivingGirlList[0].index
				// 	}

				// }
			},
			handleLiveTabClick(item, index) {
				this.actLiveTabIndex = index;
				this.actLiveType = item.type;
			},
			handleStartLive() {
				// if(this.activeGirlIndex==-1){

				// }
				// this.$emit('result', this.activeLive.storyId)

				if (this.activeGirl.image) {
					this.activeLive.liveGirl = {
						...this.activeGirl,
					};
					this.activeGirl.living = true;
					this.activeLive.living = true;
				}

				console.log("开始直播点击后", this.activeLive, this.liveRoomList);
				// this.handleCloseLiveModal()
				this.handleCloseLiveSecondModal();
			},
			handlelGirlItemClick(item, index) {
				if (!item.living) {
					this.activeGirlIndex = index;
					this.tempActiveGirl = item;
					// this.activeGirl = item
				}
			},
			handleRoomItemClick(item, index) {
				if (!item.locked) {
					this.activeLive = item;
					this.showLiveConfirm = true;
					this.actLiveType = "live";
				}
			},
			handleCloseLiveThirdModal() {
				this.showLiveThirdModal = false;
				this.activeStaffIndex = -1;
				this.tempActiveStaff = {};
				// this.activeGirlIndex = -1
				// this.tempActiveGirl = {}
			},
			handleCloseLiveSecondModal() {
				this.showLiveSecondModal = false;
				this.handleCloseLiveThirdModal();
			},
			handleCloseLiveModal() {
				this.activeGirlIndex = -1;
				this.activeStaffIndex = -1;
				this.showLiveConfirm = false;
				this.actLiveTabIndex = 0;
				this.actLiveType = "live";
				this.activeGirl = {};
				this.activeStaffIndex = -1;
				this.activeStaffSlotType = "";
				this.firstInStaffManage = true;

				this.handleCloseLiveSecondModal();
			},
			handleSkillClick(data) {
				if (!data.locked) {
					this.$refs.skillPop.open(data);
				}
			},
			close() {
				this.handleCloseLiveModal();
				this.handleCloseStaffUpdateModal();
				this.show = false;
			},
			open(type, backName, companyData) {
				this.type = type;
				if (["staff", "secretary"].includes(type)) {
					this.developType = type;
				}
				// this.backName = backName
				this.companyData = {
					...companyData,
				};
				this.show = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.modal-box {
		pointer-events: fill;
	}

	.content-box {
		position: relative;
		box-shadow: 0rpx 8rpx 40rpx -2rpx rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		height: 100vh;

		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);
		z-index: 999999999999999999999;

		.bg-box {
			position: absolute;
			width: 100vw;
			height: 100vh;
			z-index: 1;

			.bg-img {
				width: 100%;
				height: 100%;
			}
		}

		.live-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			padding: 0 40rpx;
			z-index: 999999999999999999999;
			pointer-events: none;

			.center-content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;

				box-sizing: border-box;

				.live-content-box {
					position: relative;
					width: 100%;
					height: 100%;

					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					.top-box {
						width: 100%;
						height: 170rpx;
					}

					.scroll-content {
						width: 100%;
						flex: 1;
						box-sizing: border-box;
						padding: 30rpx 0rpx;
						overflow: hidden;
						pointer-events: fill;

						.live-room-list {
							box-sizing: border-box;
							padding: 30rpx;
							padding-top: 0rpx;

							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							flex-wrap: wrap;

							.room-item {
								position: relative;
								width: calc(50% - 5rpx);
								height: 600rpx;
								// margin-right: 20rpx;
								margin-bottom: 10rpx;
								box-sizing: border-box;
								// padding: 10rpx;
								// padding-bottom: 0rpx;
								box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.3);

								border-radius: 8rpx;
								overflow: hidden;

								.room-item-coverImg {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									z-index: 1;
									width: 100%;
									height: 100%;
								}

								.name-consume-box {
									position: absolute;
									left: 0rpx;
									bottom: 0rpx;
									z-index: 2;

									height: 100rpx;
									width: 100%;

									color: #fff;
									font-size: 20rpx;
									line-height: 20rpx;
									display: flex;
									justify-content: space-between;
									align-items: flex-end;
									box-sizing: border-box;
									padding-left: 10rpx;
									padding-right: 10rpx;
									// background-color: #fff;
									background-image: linear-gradient(to bottom,
											rgba(0, 0, 0, 0) 0%,
											rgba(0, 0, 0, 0.6) 30%,
											rgba(0, 0, 0, 0.8) 80%,
											rgba(0, 0, 0, 0.8) 100%);
									box-sizing: border-box;
									padding-bottom: 20rpx;

									.room-name {
										height: 40rpx;
										display: flex;
										justify-content: flex-start;
										align-items: center;
										margin-right: 5rpx;

										.room-point {
											width: 5rpx;
											height: 5rpx;
											border-radius: 50%;
											background-color: #f3ecbb;
											margin-left: 6rpx;
											margin-right: 6rpx;
										}

										// .room-level {
										// 	color: #f3ecbb;
										// 	display: flex;
										// 	justify-content: flex-start;
										// 	align-items: flex-end;
										// }

										.romm-name-text {
											margin-right: 10rpx;
										}

										.consume-box {
											// height: 100%;
											height: 40rpx;
											display: flex;
											justify-content: flex-end;
											align-items: center;

											.consume-icon {
												width: 30rpx;
												height: 30rpx;
												margin-right: 5rpx;
											}

											.consume-num {
												color: #fff;
												font-size: 24rpx;
												line-height: 24rpx;
											}
										}
									}

									.room-level {
										height: 40rpx;
										color: #f3ecbb;
										display: flex;
										justify-content: flex-start;
										align-items: center;
									}
								}

								.living-icon {
									position: absolute;
									left: 10rpx;
									top: 10rpx;
									font-size: 20rpx;
									line-height: 30rpx;
									padding: 0rpx 10rpx;
									border-radius: 5rpx;
									color: #fff;
									font-weight: 700;
									text-align: center;
									background-color: #f05151;
									z-index: 3;
								}

								.room-locked-masker {
									position: absolute;
									width: 100%;
									height: 100%;
									left: 0rpx;
									top: 0rpx;
									background-color: rgba(0, 0, 0, 0.6);
									z-index: 9;
									display: flex;
									justify-content: center;
									align-items: center;

									.room-locked-icon {
										width: 45rpx;
										height: 45rpx;
									}
								}
							}
						}
					}
				}
			}

			.confirm-live-modal {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(15rpx);
				z-index: 999999999999999999999;
				pointer-events: fill;
				overflow: hidden;

				.live-modal-update {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 500rpx;
					// background-color: rgba(255, 255, 255, 0);
					// backdrop-filter: blur(15rpx);
					z-index: 9;
					background: linear-gradient(to bottom,
							rgba(0, 0, 0, 0) 0%,
							rgba(0, 0, 0, 0.8) 30%,
							rgba(0, 0, 0, 0.8) 100%);
				}

				.live-modal-img {
					width: 100%;
					height: 100%;
				}

				.live-modal-right-btns {
					position: absolute;
					right: 20rpx;
					bottom: 600rpx;
					width: 70rpx;
					height: auto;
					z-index: 9999999999;
					pointer-events: fill;

					.live-modal-btn-item {
						position: relative;
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 60rpx;
						border-radius: 50%;
						// box-shadow: inset 0rpx 0rpx 15rpx #fff;
						background-color: rgba(0, 0, 0, 0.1);
						box-shadow: 0rpx 0rpx 4rpx rgba(255, 255, 255, 0.8);

						.live-add-icon {
							width: 50%;
							height: 50%;
						}

						.live-girl {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							box-sizing: border-box;
							overflow: hidden;

							.live-girl-img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								animation: liveBreath 1s ease-in-out infinite;
							}
						}

						.staff-add-icon {
							width: 60%;
							height: 60%;
						}

						.btn-text {
							position: absolute;
							left: 0rpx;
							bottom: -25rpx;
							width: 100%;
							font-size: 20rpx;
							line-height: 20rpx;
							color: #fff;
							text-shadow: 0rpx 0rpx 1rpx rgba(0, 0, 0, 0.3);
							text-align: center;
						}

						@keyframes liveBreath {
							0% {
								transform: scale(1);
							}

							50% {
								transform: scale(0.9);
							}

							100% {
								transform: scale(1);
							}
						}
					}

					.liveing-btn-item {
						border: 1rpx solid #fd3264;
						box-shadow: none;
					}
				}

				.live-second-modal,
				.live-third-modal {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.8);
					z-index: 99999999999;
					backdrop-filter: blur(15rpx);

					.live-sencond-modal-content,
					.live-third-modal-content {
						width: calc(100% - 80rpx);
						height: 700rpx;

						.live-room-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						.live-consume {
							justify-content: center;
						}

						.live-room-content {
							width: 100%;
							box-sizing: border-box;
						}

						.live-room-live-time {
							color: #2aa515;
						}

						.right-girl-slot {
							position: relative;
							width: 130rpx;
							height: 190rpx;
							margin-top: 20rpx;
							margin-right: 20rpx;
							border-radius: 8rpx;
							// box-shadow: 0rpx 0rpx 2rpx rgba(0,0,0,.6);
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 50rpx;
							// backdrop-filter: blur(15rpx);
							// background-color: rgba(255,255,255,.5);
							background-color: rgba(0, 0, 0, 0.05);
							overflow: hidden;

							.slot-image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}

							.slot-tip {
								position: absolute;
								left: 0rpx;
								bottom: 30rpx;
								// transform: translateY(100%);
								width: 100%;
								height: 30rpx;
								font-size: 16rpx;
								line-height: 16rpx;
								text-align: center;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #5e5c5d;
								letter-spacing: 2rpx;
							}

							.person-bottom-info {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								display: flex;
								justify-content: flex-start;
								align-items: flex-end;
								height: 40rpx;
								width: 100%;
								z-index: 4;
								background-image: linear-gradient(to bottom,
										rgba(0, 0, 0, 0) 0%,
										rgba(0, 0, 0, 0.5) 50%,
										rgba(0, 0, 0, 0.6) 80%,
										rgba(0, 0, 0, 0.7) 100%);

								.person-name {
									width: 60rpx;
									height: 100%;
									font-size: 12rpx;
									line-height: 12rpx;
									display: flex;
									justify-content: flex-start;
									align-items: flex-end;
									color: #fff;
									box-sizing: border-box;
									padding-left: 6rpx;
									padding-bottom: 8rpx;
								}

								.person-popularity {
									flex: 1;
									height: 100%;
									display: flex;
									justify-content: flex-end;
									align-items: flex-end;
									box-sizing: border-box;
									padding-right: 6rpx;
									padding-bottom: 8rpx;

									.popularity-icon {
										width: 15rpx;
										height: 15rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										margin-right: 3rpx;

										.popularity-icon-img {
											width: 100%;
											height: 100%;
										}
									}

									.person-popularity-num {
										font-size: 12rpx;
										line-height: 12rpx;
										color: #fff;
									}
								}
							}
						}

						.left-room-attr {
							flex: 1;
						}
					}

					.live-third-modal-content {
						height: 800rpx;

						.third-confirm-box {
							width: 100%;
							height: 100rpx;

							.confirm-btn {
								width: 180rpx;
								height: 60rpx;
							}
						}
					}

					.live-room-second-modal-content {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 0rpx;
					}

					.seconde-modal-staff-content {
						height: 720rpx;

						.staff-slot-list {
							width: 618rpx;
							height: 600rpx;
							margin-top: 20rpx;
							box-sizing: border-box;
							padding: 5rpx;

							.staff-slot-item {
								width: 100%;
								height: 180rpx;
								// background-color: rgba(0, 0, 0, .1);
								background-color: rgba(0, 0, 0, 0.05);
								// backdrop-filter: blur(15rpx);
								border-radius: 5rpx;
								margin-bottom: 15rpx;

								.staff-slot-content {
									position: relative;
									width: 130rpx;
									height: 180rpx;
									background-color: rgba(0, 0, 0, 0.05);
									border-radius: 5rpx;
									// margin-left: 10rpx;
									overflow: hidden;

									.staff-slot-add-icon {
										font-size: 40rpx;
										line-height: 40rpx;
									}

									.staff-slot-tip {
										position: absolute;
										left: 0rpx;
										bottom: 30rpx;
										font-size: 16rpx;
										height: 16rpx;
										width: 100%;
										text-align: center;
									}

									.fillData {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										width: 100%;
										height: 100%;
										z-index: 3;

										.fillData-img {
											width: 100%;
											height: 100%;
										}

										.staff-slot-bottom-info {
											position: absolute;
											left: 0rpx;
											bottom: 0rpx;
											display: flex;
											justify-content: flex-start;
											align-items: flex-end;
											height: 40rpx;
											width: 100%;
											z-index: 4;
											background-image: linear-gradient(to bottom,
													rgba(0, 0, 0, 0) 0%,
													rgba(0, 0, 0, 0.5) 50%,
													rgba(0, 0, 0, 0.6) 80%,
													rgba(0, 0, 0, 0.7) 100%);

											.staff-slot-name {
												width: 60rpx;
												height: 100%;
												font-size: 12rpx;
												line-height: 12rpx;
												display: flex;
												justify-content: flex-start;
												align-items: flex-end;
												color: #fff;
												box-sizing: border-box;
												padding-left: 6rpx;
												padding-bottom: 8rpx;
											}

											.staff-slot-name-fill-center {
												width: 100%;
												justify-content: center;
												padding-left: 0rpx;
											}
										}
									}

									.close-staff {
										position: absolute;
										right: 4rpx;
										top: 4rpx;
										width: 24rpx;
										height: 24rpx;
										z-index: 7;
										border-radius: 50%;
										background-color: rgba(0, 0, 0, 0.1);
										color: #fff;

										font-size: 16rpx;
										line-height: 24rpx;
										box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.6);
									}
								}

								.staff-slot-info {
									flex: 1;
									height: 100%;
									box-sizing: border-box;
									margin-left: 20rpx;
									margin-right: 20rpx;

									.info-row {
										width: 100%;
										height: 40rpx;
										margin-top: 10rpx;
										font-size: 22rpx;
										line-height: 22rpx;
									}
								}
							}
						}
					}
				}

				.live-third-modal {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.6);
					z-index: 999999999999;
					backdrop-filter: blur(15rpx);
				}
			}
		}



		.hook-company-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			padding: 0 40rpx;
			z-index: 2;

			.center-content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 600rpx;
				height: 700rpx;
				// background-color: rgba(255, 255, 255, .6);
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 6rpx;
				background-color: rgba(255, 255, 255, 0);
				backdrop-filter: blur(15rpx);
				// box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, .8);
				box-shadow: inset 0rpx 0rpx 2rpx rgba(255, 255, 255, 0.8);

				.content-box {
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, 0.8);
					border-radius: 10rpx;
					box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, 0.8);
					overflow: hidden;

					.top-title {
						position: relative;
						width: 100%;
						height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						color: #5e5c5d;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						letter-spacing: 2rpx;
						line-height: 60rpx;

						.bottom-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 2rpx;
							box-sizing: border-box;
							padding: 0rpx 20rpx;

							.line-content {
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.3);
								opacity: 0.4;
							}
						}

						.close-icon {
							position: absolute;
							right: 20rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 50rpx;
							height: 50rpx;

							.close-icon-img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.get-attr-box {
						width: 100%;
						height: 50rpx;
						box-sizing: border-box;
						padding: 0rpx 20rpx;

						margin-top: 20rpx;

						.attr-box-content {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							background-color: rgba(0, 0, 0, 0.05);
							flex-wrap: wrap;
						}

						.attr-item {
							flex: 1;
							height: 100%;
							// margin-right: 20rpx;
							font-size: 16rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							color: #5e5c5d;
							line-height: 50rpx;

							.attr-icon {
								width: 30rpx;
								height: 30rpx;
								margin-right: 5rpx;
								margin-left: 5rpx;

								.attr-icon-img {
									width: 100%;
									height: 100%;
								}
							}

							.attr-text {
								margin-right: 10rpx;
							}

							.attr-content {
								// color: #feff03;
							}

							&:last-child {
								margin-right: 0rpx;
							}
						}
					}

					.hook-time {
						width: 100%;
						height: 50rpx;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-top: 20rpx;

						.hook-time-content {
							position: relative;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.05);
							font-size: 20rpx;
							line-height: 50rpx;
							color: #000;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.hook-time-icon {
								position: absolute;
								left: 0rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 1rpx;
								height: 30rpx;
								background-color: rgba(0, 0, 0, 0.3);
								opacity: 0.6;
							}

							.hook-time-title {
								margin-left: 20rpx;
								margin-right: 80rpx;
							}

							.hook-time-inner {
								color: #32863f;
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.tiem-inner-icon {
									width: 20rpx;
									height: 20rpx;
									vertical-align: middle;
									margin-right: 10rpx;
								}
							}
						}
					}

					.hook-reward {
						width: 100%;
						height: 50rpx;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-top: 20rpx;

						.hook-reward-content {
							position: relative;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 100%;
							height: 100%;
							// background-color: rgba(0, 0, 0, .05);
							font-size: 20rpx;
							line-height: 50rpx;
							color: #000;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.hook-reward-icon {
								position: absolute;
								left: 0rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 1rpx;
								height: 30rpx;
								background-color: rgba(0, 0, 0, 0.3);
								opacity: 0.6;
							}

							.hook-reward-title {
								margin-left: 20rpx;
								margin-right: 80rpx;
							}
						}
					}

					.reward-list {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 35rpx;
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						margin-top: 15rpx;

						.reward-item {
							position: relative;
							width: 100rpx;
							height: 100rpx;
							background-color: #fff;
							margin-right: 35rpx;
							margin-bottom: 35rpx;
							border-top-left-radius: 15rpx;
							border-bottom-right-radius: 15rpx;
							box-sizing: border-box;
							border: 2rpx solid #acc1dd;
							overflow: hidden;

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.reward-num {
								position: absolute;
								right: 0rpx;
								bottom: 0rpx;
								display: inline-block;
								padding: 0 8rpx;
								font-size: 16rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.3);
								// border-radius: 10rpx;
								line-height: 20rpx;
							}

							.reward-icon {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}

		.company-box {
			.center-content {
				height: auto;

				.content-box {
					padding-bottom: 80rpx;

					.top-title {
						display: flex;
						justify-content: center;
						align-items: center;

						.changeCompanyName-icon {
							width: 30rpx;
							height: 30rpx;
							margin-left: 5rpx;
						}
					}
				}
			}

			.compnay-update-condition {
				width: 100%;
				height: auto;
				font-size: 20rpx;
				line-height: 24rpx;
				color: #4c4c4c;
				box-sizing: border-box;
				padding: 0rpx 40rpx;

				.nowExp {
					color: #00b26a;
				}
			}

			.company-update-reward {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 0rpx 40rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.u-reward-item {
					position: relative;
					width: 160rpx;
					height: 220rpx;
					border-radius: 8rpx;
					margin-right: 10rpx;
					overflow: hidden;

					.u-reward-item-img {
						width: 100%;
						height: 100%;
					}

					.reward-tip-info {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 30rpx;
						background-color: rgba(0, 0, 0, 0.3);
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 14rpx;
						line-height: 14rpx;
						color: #fff;
						z-index: 1;
					}
				}
			}
		}

		.develop-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			padding: 0 40rpx;
			z-index: 2;

			.top-box {
				width: 100%;
				height: 190rpx;
			}

			.modal-content-box {
				.modal-content {
					border-radius: 2rpx;
				}
			}

			.develop-modal-content {
				width: calc(100% - 80rpx);
				height: 900rpx;
			}

			.dev-info-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				.avatar-attr {
					width: 100%;
					// height: 240rpx;
					// background-color: rgba(0, 0, 0, .05);
					box-sizing: border-box;
					padding: 5rpx;
					border-radius: 5rpx;

					.avatar-box {
						width: 175rpx;
						height: 175rpx;
						background-color: #fff;
						box-sizing: border-box;
						// padding: 5rpx;
						border-radius: 5rpx;
						overflow: hidden;
						box-shadow: 0rpx 0rpx 4rpx rgba(255, 255, 255, 1);

						.avatar-img {
							width: 100%;
							// height: 190rpx;
							height: 100%;
						}

						.bottom-power-info {
							flex: 1;
							width: 100%;

							.power-title {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #cfb56a;
								margin-right: 10rpx;
								margin-left: 10rpx;
								font-weight: 700;
							}

							.power-value {
								font-size: 22rpx;
								line-height: 22rpx;
								color: #000;
							}
						}
					}

					.dev-attr-box {
						flex: 1;
						flex-wrap: wrap;
						margin-left: 25rpx;
						// margin-right: 25rpx;

						.attr-row-item {
							width: calc(50% - 40rpx);
							height: 50rpx;
							margin-bottom: 10rpx;

							.row-item-label {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #877760;

								.point-icon {
									width: 8rpx;
									height: 8rpx;
									background-color: #877760;
									margin-right: 10rpx;
									transform: rotate(45deg);
								}
							}

							.row-item-value {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #000;
								margin-right: 10rpx;
							}
						}
					}
				}

				.level-progress {
					width: 100%;
					height: 80rpx;
					margin-top: 20rpx;

					.progress-content {
						flex: 1;
						height: 100%;
						margin-right: 20rpx;

						.progress-text {
							width: 100%;
							height: 40rpx;
							margin-bottom: 6rpx;

							.progress-level-name {
								position: relative;
								font-size: 26rpx;
								line-height: 26rpx;
								color: #000;
								padding-left: 10rpx;

								.leve-name-icon {
									position: absolute;
									left: 0rpx;
									top: 50%;
									transform: translateY(-50%);
									width: 1rpx;
									height: 100%;
									background-color: rgba(0, 0, 0, 0.3);
								}
							}

							.progress-level-power-num {
								color: #877760;
								font-size: 24rpx;
								line-height: 24rpx;

								.progress-now-Exp {
									font-size: 25rpx;
									line-height: 25rpx;
								}
							}
						}

						.progress-react {
							position: relative;
							width: 100%;
							height: 10rpx;
							background-color: rgba(0, 0, 0, 0.1);
							margin-bottom: 8rpx;

							.inner-content {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								height: 100%;
								width: 20%;
								background-color: #f8efe0;
								box-shadow: 0rpx 0rpx 2rpx #fff;
								transition: all 0.1s;
							}
						}
					}

					.dev-update-btn {
						width: 120rpx;
						height: 100%;

						.dev-update-btn-content {
							width: 180rpx;
							height: 50rpx;
							font-size: 22rpx;
							line-height: 60rpx;
							background-color: transparent;
							border-radius: 5rpx;
							box-shadow: 0rpx 0rpx 4rpx #fff;
							box-sizing: border-box;
							padding: 2rpx;

							.btn-inner-content {
								position: relative;
								width: 100%;
								height: 100%;
								background-color: #f8efe0;
								color: #715a52;
								border-radius: 5rpx;
							}
						}
					}
				}
			}

			.dev-skill-box {
				flex: 1;
				width: 100%;
				overflow: hidden;

				.dev-skill-scroll {
					width: 600rpx;
					height: 100%;

					.dev-skill-list {
						width: 100%;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding-top: 10rpx;

						.dev-skill-item {
							position: relative;
							width: 120rpx;
							height: 120rpx;
							margin-right: 40rpx;
							margin-bottom: 60rpx;
							box-shadow: 0rpx 0rpx 4rpx rgba(255, 255, 255, 1);
							border-radius: 50%;

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.dev-skill-item-img {
								position: relative;
								width: 100%;
								height: 100%;
								border-radius: 50%;
								background-color: #fff;
								overflow: hidden;

								.locked-masker {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									border-radius: 50%;
									background-color: rgba(0, 0, 0, 0.6);
									z-index: 9;

									.locked-icon {
										width: 30rpx;
										height: 30rpx;
									}
								}
							}

							.dev-skill-level {
								position: absolute;
								right: 0rpx;
								bottom: 0rpx;
								width: 35rpx;
								height: 35rpx;
								font-size: 24rpx;
								line-height: 35rpx;
								border-radius: 50%;
								background-color: #fff;
								text-align: center;
								color: #000;
								box-shadow: 1rpx 1rpx 6rpx rgba(0, 0, 0, 0.1);
							}

							.dev-skill-text {
								position: absolute;
								left: 0rpx;
								bottom: -30rpx;
								width: 100%;
								color: #877760;
								font-size: 20rpx;
								line-height: 20rpx;
								text-align: center;
							}
						}
					}
				}
			}

			.dev-bottom-box {
				width: 100%;
				height: 30rpx;
			}

			.level-list {
				flex: 1;
				width: 100%;
				overflow: hidden;

				.level-scoll-content {
					width: 100%;
					height: 100%;
					overflow: hidden;

					// background-color: #fff;
					.level-item {
						position: relative;
						width: 100%;
						// margin-bottom: 15rpx;

						.top-title {
							width: 100%;
							height: 40rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.line {
								flex: 1;
								height: 2rpx;
								background: repeating-linear-gradient(to right,
										rgba(255, 255, 255, 0.6),
										rgba(255, 255, 255, 0.6) 5rpx,
										transparent 5rpx,
										transparent 10rpx);
								opacity: 0.6;
							}

							.level-name {
								height: 100%;
								line-height: 40rpx;
								font-size: 24rpx;
								color: #fff;
								text-align: center;
								letter-spacing: 2rpx;
								margin: 0 20rpx;
							}
						}

						.skill-list {
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: flex-start;
							flex-wrap: wrap;
							margin-top: 30rpx;

							.skill-item {
								width: 120rpx;
								margin-right: 40rpx;
								margin-bottom: 40rpx;

								&:nth-child(4n) {
									margin-right: 0rpx;
								}

								.skill-img {
									position: relative;
									width: 100%;
									height: 120rpx;
									border-radius: 50%;
									overflow: hidden;
									box-sizing: border-box;
									box-shadow: 0rpx 0rpx 6rpx rgba(255, 255, 255, 1);

									.img-content {
										width: 100%;
										height: 100%;
										border-radius: 50%;
									}

									.locked-masker {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										width: 100%;
										height: 100%;
										border-radius: 50%;
										background-color: rgba(0, 0, 0, 0.6);
										z-index: 9;
									}
								}

								.skill-name {
									width: 100%;
									height: 30rpx;
									font-size: 20rpx;
									color: #fff;
									line-height: 30rpx;
									text-align: center;
									margin-top: 5rpx;
									margin-bottom: 5rpx;
								}

								.skill-percent {
									position: relative;
									width: 100%;
									height: 20rpx;
									background-color: rgba(0, 0, 0, 0.3);
									border-radius: 2rpx;
									box-shadow: 0rpx 0rpx 2rpx #fff;

									.percent-content {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										background-color: #fef1c7;
										border-radius: 2rpx;
										height: 100%;
										z-index: 1;
									}

									.text-box {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										border-radius: 2rpx;
										height: 100%;
										width: 100%;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										line-height: 20rpx;
										font-size: 16rpx;
										color: #fff;
										z-index: 2;
										text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.3);
									}
								}
							}

							.empty-item {
								opacity: 0;
								height: 1rpx;
								margin-bottom: 0rpx;
							}
						}

						.locked-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							background-color: rgba(0, 0, 0, 0.6);
							width: 100%;
							height: 100%;
							z-index: 10;
						}
					}
				}
			}
		}

		.staff-secretary-box {
			.mode-modal-content {
				padding-bottom: 10rpx;
			}

			.secretary-box {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 20rpx 40rpx;

				.secretary-list {
					width: 100%;
					height: 100%;
					flex-wrap: wrap;

					.secretary-item {
						position: relative;
						width: calc(50% - 10rpx);
						height: 450rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						// background-color: rgba(255, 255, 255, .8);
						background-color: rgba(248, 239, 224, 1);
						border-radius: 6rpx;
						overflow: hidden;
						box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.3);




						&:nth-child(2n) {
							margin-right: 0rpx;
						}

						.card-not-get-makser {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							z-index: 99;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .5);

							.not-get-tip {
								font-size: 22rpx;
								line-height: 40rpx;
								height: 40rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, .5);
								text-align: center;
								width: 100%;
								text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
								opacity: 0.8;
							}

						}

						.secretary-item-info {
							position: relative;
							width: 100%;
							height: 400rpx;
							border-radius: 6rpx;
							// border: 1rpx solid rgba(0, 0, 0, 0.1);

							.secretary-item-info-img {
								// border-radius: 6rpx;
							}

							.secretary-attr-info {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								z-index: 9;
								width: 100%;
								height: 60rpx;
								background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .6)100%);

								color: #fff;
								font-size: 18rpx;
								line-height: 18rpx;

								.attr-item {
									flex: 1;
									box-sizing: border-box;
									padding: 10rpx;
								}


							}

							.secretary-name {
								position: absolute;
								left: 10rpx;
								top: 0rpx;
								font-size: 20rpx;
								line-height: 26rpx;
								color: #fff;
								text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.3);
								z-index: 9;
								width: 30rpx;
								min-height: 100rpx;
								background-image: linear-gradient(to top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .3)30%, rgba(0, 0, 0, .3)100%);
								padding: 25rpx 0rpx;
								text-align: center;


							}


							.secretary-level {
								position: absolute;
								top: 10rpx;
								right: 10rpx;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #fff;
								text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.5);

								.level-text {
									font-size: 16rpx;
									line-height: 16rpx;
								}
							}
						}

						.secretary-item-update-btn {
							flex: 1;
							width: 100%;
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 700;
							// background-color: rgba(248, 239, 224, 1);
							// color: #715a52;
							background-image: linear-gradient(to right, #f3f1c6, #efcf80);
							color: #b27439;
							transition: all 0.1s;

							.secretary-update-consume {
								margin-right: 20rpx;
								// font-weight: 400;
								// font-size: 20rpx;


								.secretary-consume-icon {
									width: 30rpx;
									height: 30rpx;
									margin-right: 5rpx;
								}
							}

						}



						.secretary-update-scale {
							transform: scale(0.9);
						}

					}

					.coins-no-enough {
						background-color: #f0f0f0;

						.secretary-item-update-btn {
							filter: grayscale(100%);
						}
					}
				}
			}
		}
	}

	.flex-cloumn {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.second-tip {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 40rpx;
		font-size: 16rpx;
		line-height: 16rpx;
		color: #000;
		margin-bottom: 10rpx;
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-between-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.consume-box {
		// height: 100%;
		height: 40rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.consume-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}

		.consume-num {
			color: #fff;
			font-size: 24rpx;
			line-height: 24rpx;
		}

		.consume-number {
			font-size: 24rpx;
			line-height: 24rpx;

			.num {
				color: #55d8c0;
			}

			.need-num {}
		}
	}

	.bottom-tip {
		position: absolute;
		left: 0rpx;
		bottom: 30rpx;
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.left-point,
		.right-point {
			width: 6rpx;
			height: 6rpx;
			// border-radius: 50%;
			background-color: #fff;
			transform: rotate(45deg);
		}

		.center-content,
		.m-center-content {
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
			line-height: 50rpx;
			color: #fff;
			margin-left: 15rpx;
			margin-right: 15rpx;
		}
	}

	.top-title {
		position: relative;
		width: 100%;
		height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		color: #5e5c5d;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		letter-spacing: 2rpx;
		line-height: 60rpx;

		.bottom-line {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100%;
			height: 2rpx;
			box-sizing: border-box;
			padding: 0rpx 20rpx;

			.line-content {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				opacity: 0.4;
			}
		}

		.close-icon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 50rpx;
			height: 50rpx;

			.close-icon-img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.red-point {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #e25850;
		z-index: 9;
		border: 1rpx solid rgba(2555, 255, 255, 0.6);
	}


	.buttonScale {
		animation: buttonClickScale 0.2s ease;
	}
</style>